<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link rel="stylesheet" href="../css/mui.min.css" />
		<style>
			::-webkit-input-placeholder {
				/* WebKit browsers */
				color: #fff;
			}
			
			:-moz-placeholder {
				/* Mozilla Firefox 4 to 18 */
				color: #fff;
			}
			
			::-moz-placeholder {
				/* Mozilla Firefox 19+ */
				color: #fff;
			}
			
			:-ms-input-placeholder {
				/* Internet Explorer 10+ */
				color: #fff;
			}
			/*input,
			textarea {
				color: #fff;
				text-shadow: 0px 0px 0px #000;
				-webkit-text-fill-color: transparent;
			}
			
			input::-webkit-input-placeholder,
			textarea::-webkit-input-placeholder {
				text-shadow: none;
				-webkit-text-fill-color: initial;
			}*/
			
			html {
				height: 100%;
				width: 100%;
			}
			
			body {
				background: url('../images/login.png');
				background-repeat: no-repeat;
				background-size: cover;
			}
			
			.main {
				height: 400px;
				width: 200px;
				width: 100%;
				margin-top: 50px;
				padding-top: 40px;
				padding-left: 8%;
				padding-right: 8%;
			}
			
			.head-img {
				height: 100px;
				width: 100px;
				border-radius: 50%;
				display: block;
				margin: 0 auto;
			}
			
			.item {
				margin-top: 20px;
				position: relative;
				text-align: center;
			}
			
			.item input {
				border: none;
				background: transparent;
				border-bottom: 1px solid #fff;
				color: #fff!important;
				border-radius: 0;
				padding-left: 45px;
				height: 40px;
			}
			
			.item span {
				position: absolute;
				top: 6px;
				color: #fff;
			}
			
			.item .label {
				left: 8px;
			}
			
			.item .code-btn {
				position: absolute;
				top: 3px;
				right: 0;
				background: #3dc6d6;
				border: none;
				color: #FFFFFF;
			}
			
			.item .code-btn:active {
				background: #41b9c7!important;
				border: none!important;
			}
			
			.item .cancel {
				right: 8px;
			}
			
			.login {
				background: #3dc6d6;
				border: none;
			}
			
			.login:active {
				background: #41b9c7!important;
				border: none!important;
			}
			
			.mui-btn-link {
				color: #FFFFFF;
				font-size: 16px;
			}
			
			.mui-btn-link:active {
				color: #DDDDDD;
			}
		</style>
	</head>

	<body>
		<div class="main" id="app">
			<img class="head-img" src="../images/logo.png" />
			<!--登陆-->
			<div class="login-div" v-show="page=='login-div'">
				<div class="item">
					<span class="label mui-icon mui-icon-email"></span>
					<input v-model="model.email" type="text" placeholder="邮箱" />
					<span v-show="model.email.length > 0" @tap="clearPhone" class="cancel mui-icon mui-icon-close"></span>
				</div>
				<!--<div class="item">
				<span class="label mui-icon mui-icon-locked"></span>
				<input v-model="model.password" type="password" placeholder="请输入验证码" />
				<span @tap="clearPassword" v-show="model.password.length > 0" class="cancel mui-icon mui-icon-close"></span>
				<button @tap="getCode" class="code-btn" v-html="codeBtnText"></button>
			</div>-->
				<div class="item">
					<span class="label mui-icon mui-icon-locked"></span>
					<input v-model="model.password" type="password" placeholder="请输入密码" />
					<span @tap="clearPassword" v-show="model.password.length > 0" class="cancel mui-icon mui-icon-close"></span>
				</div>

				<div class="item">
					<a class="mui-btn-link" @tap="to('register-div')">我要注册</a>&nbsp;&nbsp;&nbsp;
					<a class="mui-btn-link" @tap="to('retrieve-div')">找回密码</a>
				</div>
				<div class="item">
					<button type="button" click="login" @tap="login" class="mui-btn mui-btn-block mui-btn-blue login">登录</button>
				</div>
			</div>
			<!--注册-->
			<div class="register-div" v-show="page=='register-div'">
				<div class="item">
					<span class="label mui-icon mui-icon-email"></span>
					<input v-model="model.email" type="text" placeholder="注册邮箱" />
					<span v-show="model.email.length > 0" @tap="clearPhone" class="cancel mui-icon mui-icon-close"></span>
				</div>
				<!--<div class="item">
					<span class="label mui-icon mui-icon-info"></span>
					<input v-model="model.checkCode" type="text" placeholder="请输入验证码" />
					<span @tap="clearPassword" v-show="model.checkCode.length > 0" class="cancel mui-icon mui-icon-close"></span>
					<button @tap="getCode" class="code-btn" v-html="codeBtnText"></button>
				</div>-->
				<div class="item">
					<span class="label mui-icon mui-icon-locked"></span>
					<input v-model="model.password" type="password" placeholder="请输入密码" />
					<span @tap="clearPassword" v-show="model.password.length > 0" class="cancel mui-icon mui-icon-close"></span>
				</div>

				<div class="item">
					<a class="mui-btn-link" @tap="to('login-div')">返回登陆</a>&nbsp;&nbsp;&nbsp;
				</div>
				<div class="item">
					<button type="button" @tap="register" class="mui-btn mui-btn-block mui-btn-blue login">注册</button>
				</div>
			</div>
			<!--找回-->
			<div class="retrieve-div" v-show="page=='retrieve-div'">
				<div class="item">
					<span class="label mui-icon mui-icon-email"></span>
					<input v-model="model.email" type="text" placeholder="找回密码的邮箱" />
					<span v-show="model.email.length > 0" @tap="clearPhone" class="cancel mui-icon mui-icon-close"></span>
				</div>

				<div class="item">
					<span class="label mui-icon mui-icon-info"></span>
					<input v-model="model.checkCode" type="password" placeholder="请输入验证码" />
					<span @tap="clearPassword" v-show="model.checkCode.length > 0" class="cancel mui-icon mui-icon-close"></span>

					<button @tap="getCode" class="code-btn" v-html="codeBtnText"></button>
				</div>

				<div class="item" v-show="checked">
					<span class="label mui-icon mui-icon-locked"></span>
					<input v-model="model.password" type="password" placeholder="新密码" />
					<span @tap="clearPassword" v-show="model.password.length > 0" class="cancel mui-icon mui-icon-close"></span>
				</div>

				<div class="item">
					<a class="mui-btn-link" @tap="to('login-div')">返回登陆</a>&nbsp;&nbsp;&nbsp;
				</div>
				<div class="item">
					<button type="button" @tap="check" class="mui-btn mui-btn-block mui-btn-blue login">验证</button>
				</div>
			</div>
		</div>
		<script type="text/javascript" src="../js/mui.min.js"></script>
		<script type="text/javascript" src="../js/jQuery.js"></script>
		<script type="text/javascript" src="../js/vue.min.js"></script>
		<script type="text/javascript" src="../js/common.js"></script>
		<script>
			mui.init();
			mui.plusReady(function() {

				var ve = new Vue({
					el: "#app",
					data: {
						checked: false,
						codeBtnText: "获取验证码",
						page: "login-div",
						model: {
//													email: "422450455@qq.com",
//													password: "weimei",
							email: "",
							password: "",
							checkCode: '',
							serial: getSrial()
						}
					},
					methods: {
						to: function(page) {
							this.page = page;
						},
						check: function() {
							var that = this;
							postServer({
								url: requestUrl("/app/appUser/updatePassword"),
								data: JSON.stringify({
									email: that.model.email,
									password: that.model.password,
									checkCode: that.model.checkCode
								}),
								success: function(result) {
									if(result.success) {
										mui.toast("密码重置成功!")
										that.page = "login-div";
									} else {
										mui.toast(result.msg);
									}
								}
							})
						},
						login: function() {
							//						alert(plus.webview.currentWebview().opener().getURL())
							postServer({
								url: requestUrl("/app/appUser/emailAndPasswordLogin"),
								data: JSON.stringify(this.model),
								success: function(result) {
									if(result.success) {
										setLoginUser(result.result);
										plus.webview.getWebviewById("html/personal.html").evalJS("vm.initUser()");
										var opener = plus.webview.currentWebview().opener()
										if(opener.getURL().endsWith("index.html")){
											opener.evalJS("vm.isAllopatry()");
										}
										//									plus.webview.currentWebview().opener().evalJS("vm.initUser()")
										plus.webview.currentWebview().close()
									} else {
										mui.toast(result.msg);
									}
								}
							})
						},
						retrieve: function() {
							mui.toast("注册");
						},
						register: function() {
							var that = this;
							if(!that.model.email) {
								mui.toast("请填写邮箱!")
								return;
							}
							if(!that.model.password) {
								mui.toast("请填写密码!")
								return;
							}
							postServer({
								url: requestUrl("/app/appUser/emailRegister"),
								data: JSON.stringify({
									email: that.model.email,
									password: that.model.password //,
									//								code: that.model.checkCode
								}),
								success: function(result) {
									if(result.success) {
										mui.toast("注册成功!")
										that.page = "login-div";
									} else {
										mui.toast(result.msg);
									}
								}

							})

							mui.toast("注册");
						},
						clearPassword: function() {
							this.model.password = "";
						},
						clearPhone: function() {
							this.model.email = "";
						},
						getCode: function(event) {
							var that = this;
							if(!that.model.email) {
								mui.toast("请填写邮箱!");
								return;
							}
							that.checked = true;
							that.model.checkCode = ""
							event.preventDefault();

							postServer({
								url: requestUrl("/app/appUser/sendEmailCheckCode"),
								data: JSON.stringify({
									email: that.model.email,
									version: 1
								}),
								success: function(result) {
									if(result.success) {
										mui.toast("邮箱验证码已经发送请注意查收,有效期为5分钟!")
										$(".code-btn").attr("disabled", "disabled");
										this.codeBtnText = "60S";
										that.setCodeBtnText(60);
									} else {
										mui.toast(result.msg);
									}
								}

							})

						},
						setCodeBtnText: function(time) {
							var that = this;
							if(time > 0) {
								time--;
								setTimeout(function() {
									that.codeBtnText = time + "S";
									that.setCodeBtnText(time);
								}, 1000)
							} else {
								$(".code-btn").removeAttr("disabled");
								that.codeBtnText = "重新获取验证码";
							}
						}
					}
				});

				setTimeout(function() {
					plus.webview.currentWebview().show("slide-in-right");
				}, 100)
				var toast;
				mui.back = function() {
					if(toast) {
						plus.runtime.quit();
					} else {
						mui.toast("再按一次退出应用!");
						toast = true;
						setTimeout(function() {
							toast = undefined;
						}, 2000)
					}

				}
			})
			//			var _toast = false;
			//			mui.back = function() {
			//				if(!_toast || !_toast.isVisible()) {
			//					_toast = mui.toast('再按一次退出程序', {
			//						duration: 'short',
			//						type: 'div'
			//					});
			//				} else {
			//					plus.runtime.quit();
			//				}
			//			}
		</script>
	</body>

</html>